<template>
    <div>
        <!--<div id='search-map' :style="{'min-height':mapHeight}"></div>-->
        <div id="outer-box">
            <div id="container" class="map" tabindex="0"></div>
            <div id="panel" class="scrollbar1">
                <div id="searchBar">
                    <input id="searchInput" placeholder="输入关键字搜素POI" />
                </div>
                <div id="searchResults"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import { lazyAMapApiLoaderInstance } from 'vue-amap';
    export default {
        props: {
            mapHeight: {
                type: Number | String,
                default: '90vh'
            },
            poiPicker: {
                type: Boolean,
                default: true,
            },
            //自定义地图
            mapStyle: {
                type: String,
            }
        },
        data () {
            return {
                map: null,
                zoom: 10,
                location: null
            };
        },

        mounted () {
           this.initMap();
        },

        methods: {
            // 实例化地图
            initMap () {
                const self = this;
                lazyAMapApiLoaderInstance.load().then(() => {
                    let mapOption = {
                        zoom: self.zoom,
                        center: JSON.parse(localStorage.getItem('lnglat'))
                    };
                    if(this.mapStyle){
                        mapOption.mapStyle = this.mapStyle;
                    }
                    this.map = new AMap.Map('container', mapOption);

                    const _map = this.map;
                    let zoomCenter;
                    _map.on('zoomstart', function (e) {
                        zoomCenter = _map.getCenter();

                    });
                    _map.on('zoomend', function (e) {
                        _map.setCenter(zoomCenter);
                    });
                    if(this.poiPicker){
                        AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {

                            var poiPicker = new PoiPicker({
                                input: 'searchInput',
                                placeSearchOptions: {
                                    map: _map,
                                    pageSize: 10
                                },
                                searchResultsContainer: 'searchResults'
                            });

                            poiPicker.on('poiPicked', function(poiResult) {

                                poiPicker.hideSearchResults();

                                var source = poiResult.source,
                                    poi = poiResult.item;

                                if (source !== 'search') {

                                    //suggest来源的，同样调用搜索
                                    poiPicker.searchByKeyword(poi.name);

                                } else {
                                }
                            });

                            poiPicker.onCityReady(function() {
                                poiPicker.searchByKeyword('美食');
                            });
                        });
                    }
                })
            }
        }
    };
</script>
<style scoped>
    #outer-box {
        height: 90vh;
        position: relative;
    }

    #container {
        height: 100%;
        width: 100%;
    }

    #panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        overflow: auto;
        width: 300px;
        z-index: 999;
        border-left: 1px solid #eaeaea;
        background: #fff;
    }
    #searchResults::-webkit-scrollbar{
        width: 1px !important;
    }
    #searchBar {
        height: 30px;
        background: #ccc;
    }

    #searchInput {
        width: 100%;
        height: 30px;
        line-height: 30%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #ccc;
        padding: 0 5px;
    }

    #searchResults {
        overflow: auto;
        height: calc(100% - 30px);
    }

    .amap_lib_placeSearch,
    .amap-ui-poi-picker-sugg-container {
        border: none!important;
    }

    .amap_lib_placeSearch .poibox.highlight {
        background-color: #CAE1FF;
    }

    .poi-more {
        display: none!important;
    }
</style>
<!--<style>-->
    <!--.amap-ui-poi-picker-sugg-container{-->
        <!--top: 36px !important;-->
    <!--}-->
<!--</style>-->
<!--<style lang="less" scoped>-->
    <!--@import url(../../components/map/map.less);-->
    <!--#pickerBox {-->
        <!--position: absolute;-->
        <!--z-index: 9999;-->
        <!--top: 10px;-->
        <!--left: 20px;-->
        <!--width: 300px;-->
    <!--}-->

    <!--.input-map{-->
        <!--width: 300px;-->
        <!--height: 30px;-->
        <!--padding-left: 6px;-->
        <!--border: 1px solid #ccc;-->
        <!--border-radius: 4px;-->
    <!--}-->
    <!--#poiInfo {-->
        <!--background: #fff;-->
        <!--/*width: 100%;*/-->
        <!--/*height: 200px;*/-->
    <!--}-->

    <!--.amap_lib_placeSearch .poibox.highlight {-->
        <!--background-color: #CAE1FF;-->
    <!--}-->

    <!--.amap_lib_placeSearch .poi-more {-->
        <!--display: none!important;-->
    <!--}-->

<!--</style>-->

